<template>
  <div class="table1_container">
    <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
      <!-- 返回按钮 -->
      <button class="report-top-button" @click="back">返回上级页面</button>
      <div style="text-align: center; margin: 10px 0;">
        <div style="display: inline-flex; gap: 20px;">
          <!-- 未完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>未完成</span>
          </div>

          <!-- 已完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>已完成</span>
          </div>

          <!-- 不合格重采 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>不合格重采</span>
          </div>
        </div>
      </div>
      <!-- 见证记录 -->
      <div>
        <div class="document-header">
          <h1 class="document-title">见证取样记录</h1>
        </div>
        <!-- 基本信息部分 - 在表格上方 -->
        <div>
          <div class="info-row">
            <span class="label">工程名称:</span>
            <span class="value kai-font">{{
                projectName + ' ' + subprojectName
              }}</span>
          </div>
        </div>
        <table class="table8_top_table">
          <!-- 表头行 -->
          <tr>
            <td class="col-1">样品名称及规格</td>
            <td class="col-2">取样部位</td>
            <td class="col-3">批量</td>
            <td class="col-4">数量(t)</td>
            <td class="col-5">日期(取样)</td>
            <td class="col-6">合格证编号</td>
          </tr>
          <!-- 数据行 -->
          <tr v-for="(item, index) in reportData" :key="index">
            <td class="col-1">{{ item.concreteStrength }}
            </td>
            <td class="col-2">{{ item.usePart }}</td>
            <td class="col-3">
              {{ item.number }}
            </td>
            <td class="col-4 text-right">{{ item.getAmount }}</td>
            <td class="col-5">{{ item.checkDate }}</td>
            <td class="col-6">{{ item.delegateNumber }}</td>
          </tr>
          <!-- 签名行 -->
          <tr>
            <td colspan="2" class="signature-cell">
              <div class="signature-section">
                <div class="signature-line">
                  <span class="signature-label">施工单位(签章):</span>
                  <span class="special-underline kai-font"/>
                </div>
                <div class="signature-line">
                  <span class="signature-label">取样人:</span>
                  <span class="special-underline kai-font"/>
                </div>
                <div class="date-line">
                  <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                </div>
              </div>
            </td>
            <td colspan="4" class="signature-cell">
              <div class="signature-section">
                <div class="signature-line">
                  <span class="signature-label">见证单位(签章):</span>
                  <span class="special-underline kai-font"/>
                </div>
                <div class="signature-line">
                  <span class="signature-label">见证人:</span>
                  <span class="special-underline kai-font"/>
                </div>
                <div class="date-line">
                  <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { searchJianZhengPreview } from '@/api/statementManage/hunNingTu/hunNingTu'

export default {
  data() {
    return {
      loading: true, // 这是一个加载标识
      reportData: {}, // 这是报表数据接收变量
      projectName: '',
      subprojectName: ''
    }
  },
  async mounted() {
    const sessionData = sessionStorage.getItem('tempObj1')
    if (sessionData) {
      const parseData = JSON.parse(sessionData)
      this.projectName = parseData.projectName
      this.subprojectName = parseData.subprojectName

      const type = this.$route.query.type
      console.log('type :', type)

      if (type === '1') {
        const { result } = await searchJianZhengPreview(parseData.projectId, parseData.subprojectId, '标准养护')
        this.reportData = result
      } else if (type === '2') {
        const { result } = await searchJianZhengPreview(parseData.projectId, parseData.subprojectId, '同条件养护')
        this.reportData = result
      } else {
        this.$message.error('请求报表数据出错')
      }
      console.log('报表数据 :' + JSON.stringify(this.reportData))
    } else {
      this.$message.error('获取数据失败')
    }
  },
  beforeDestroy() {
    // 这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document
      .querySelector('body')
      .setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: '/menus/statement' })
    }
  }
}
</script>

<style scoped>

/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
  background-color: #ffffff; /* 未完成 - 白色或默认色 */
}

.row-finished {
  background-color: #e6f7e6; /* 已完成 - 浅绿色 */
}

.row-failed {
  background-color: #ffebeb; /* 不合格重采 - 浅红色 */
}

.table1_container {
  width: 80%;
  background: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 20px;
}

.table1_dataShower {
  width: 80%;
  background: white;
  margin: 0 auto;
  border: 2px black solid;
}

/*这是返回按钮的样式*/
.report-top-button {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6); /* 建筑行业蓝色调，稳重且有活力 */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.report-top-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/*表格样式*/
.table8_top_table {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

/*表格的样式*/
.table8_top_table tr td {
  height: 50px;
  border: 1px solid black;
  word-wrap: break-word; /* 允许长单词换行 */
  overflow-wrap: break-word; /* 更现代的换行属性 */
}

.document-header {
  text-align: center;
  margin-bottom: 5%;
}

.document-title {
  font-size: 1.5rem;
  /*font-weight: 700;*/
  margin: 0;
  padding: 2% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  align-items: center;
}

.label {
  /* font-weight: bold;*/
  white-space: nowrap;
  margin-left: 3em;
}

.value {
  margin-right: 3%;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.blank-box {
  display: inline-block;
  width: 3rem;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
}

.main-table td {
  border: 0.1rem solid #000;
  padding: 1.5%;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

.main-table td:nth-child(3) {
  width: 120px;
  min-width: 100px;
}

.main-table td:nth-child(4) {
  width: 120px;
  min-width: 100px;
}

/* 列宽控制 */
.main-table td.col-1 {
  width: 30%;
}

.main-table td.col-2 {
  width: 20%;
}

.main-table td.col-3 {
  width: 8%;
}

.main-table td.col-4 {
  width: 8%;
}

.main-table td.col-5 {
  width: 14%;
}

.main-table td.col-6 {
  width: 20%;
}

/* 签名部分样式 */
.signature-cell {
  text-align: left !important;
  padding: 3% !important;
  height: 8rem;
  vertical-align: top;
}

.signature-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.signature-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
}

.signature-label {
  /* font-weight: bold;*/
  white-space: nowrap;
}

.special-underline {
  border-bottom: 0.0938rem solid #333;
  padding: 0 1rem 0.125rem;
  border-radius: 0.0625rem;
  min-height: 1.45831rem;
  min-width: 4.0313rem;
}

.date-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.date-label {
  /*font-weight: bold;*/
  font-size: 1.1rem;
  letter-spacing: 0.5rem;
}

@media print {
  @page {
    size: A4 portrait;
  }
}
</style>
